<!-- 纵向布局 -->
<template>
  <el-container class="layout" direction="vertical">
    <div id="screen" class="content" ref="dataScreenRef">
      <Header></Header>
      <Main />
      <Footer />
    </div>
  </el-container>
</template>

<script setup lang="ts" name="LayoutScreen">
import Header from "@/layouts/components/Header/index.vue";
import Main from "@/layouts/components/Main/index.vue";
import Footer from "@/layouts/components/Footer/index.vue";
import { onBeforeUnmount, onMounted, ref } from "vue";
const dataScreenRef = ref<HTMLElement | null>(null);
onMounted(() => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    dataScreenRef.value.style.width = `1920px`;
    dataScreenRef.value.style.height = `1080px`;
  }
  window.addEventListener("resize", resize);
});

// 设置响应式
const resize = () => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};

// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};

onBeforeUnmount(() => {
  window.removeEventListener("resize", resize);
});
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
